<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>

<body>
    <div id="app">
        <p v-if="seen">现在你看到我了</p>

        <hr>
        <!-- 因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，
            并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。 -->
        <template v-if="seen">
            <h1>网站</h1>
            <p>Google</p>
            <p>Runoob</p>
            <p>Taobao</p>
        </template>

        <hr>
        <!-- 可以用 v-else 指令给 v-if 添加一个 "else" 块：  -->
        <div v-if="Math.random() > 0.5">随机数大于0.5</div>
        <div v-else>随机数小于0.5</div>

        <hr>
        <!-- v-else-if 即 v-if 的 else-if 块，可以链式的使用多次：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 -->
        <div v-if="type === 'A'">A</div>
        <div v-else-if="type === 'B'">B</div>
        <div v-else-if="type === 'C'">C</div>
        <div v-else>Not A/B/C</div>

        <hr>
        <!-- 我们也可以使用 v-show 指令来根据条件展示元素： -->
        <h1 v-show="ok">Hello world!</h1>
    </div>

    <script>
        const app = {
            data() {
                return {
                    seen: true, /* 改为false，信息就无法显示 */
                    type: 'C',
                    ok: true
                }
            }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>